<template>
  <div style="width: 800px; margin-left: 230px">
    <div class="user-profile-head-info-l">
      <div class="user-profile-head-info-ll">
        <div class="user-profile-avatar">
          <img
            style="
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 50%;
            "
            :src="avatar"
            alt=""
          />
        </div>
      </div>
      <div class="user-profile-head-info-rr">
        <div class="user-profile-head-info-r-t">
          <div class="user-profile-head-name">
            <div style="color: #b87100">{{ userForm1.nickname }}</div>
            <div class="person-code-age">
              <img
                style="width: 40px; height: 22px; display: block"
                src="/img/date.png"
                alt=""
              />
              <span
                style="
                  padding: 0 6px 0 4px;
                  font-size: 12px;
                  display: block;
                  height: 16px;
                  line-height: 16px;
                  text-align: center;
                "
                >{{ userInfo.date }}加入</span
              >
            </div>
          </div>
        </div>
        <div class="user-profile-head-info-r-c">
          <ul style="display: flex; padding: 0; margin: 0">
            <li
              style="
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding: 0;
                margin: 0;
                position: relative;
              "
            >
              <div class="user-profile-statistics-num">
                {{ userInfo.articleNum }}
              </div>
              <div class="user-profile-statistics-name">文章</div>
              <div class="user-profile-statistics-bar"></div>
            </li>
            <li
              style="
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding: 0;
                margin: 0;
                position: relative;
              "
            >
              <div class="user-profile-statistics-num">
                {{ userInfo.likeNum }}
              </div>
              <div class="user-profile-statistics-name">获赞</div>
              <div class="user-profile-statistics-bar"></div>
            </li>
            <li
              style="
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding: 0;
                margin: 0;
                position: relative;
              "
            >
              <div class="user-profile-statistics-num">
                {{ userInfo.collectedNum }}
              </div>
              <div class="user-profile-statistics-name">被收藏</div>
              <div class="user-profile-statistics-bar"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-descriptions style="width: 800px" :column="1" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户头像
        </template>
        <template>
          <div style="display: flex">
            <div>
              <img class="me-picture" :src="avatar" />
            </div>
            <div style="margin-left: 70px">
              <el-button
                type="primary"
                size="small"
                @click="dialogFormVisibleAvatar = true"
                >更改头像<i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </div>
          </div>
        </template>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          昵称
        </template>
        <template>
          <div style="display: flex">
            <div style="height: 20px; line-height: 20px">
              {{ userForm1.nickname }}
            </div>

            <el-button
              @click="dialogFormVisibleNickname = true"
              style="margin: 0; margin-left: 100px"
              type="primary"
              size="small"
              icon="el-icon-edit"
              >修改昵称</el-button
            >
          </div>
        </template>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          账号
        </template>
        {{ account }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          密码
        </template>
        <template>
          <div style="display: flex">
            <div style="height: 20px; line-height: 20px">
              {{ userForm2.password }}
            </div>

            <el-button
              @click="dialogFormVisiblePassword = true"
              style="margin: 0; margin-left: 100px"
              type="primary"
              size="small"
              icon="el-icon-edit"
              >修改密码</el-button
            >
          </div>
        </template>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 上传头像对话框 -->
    <el-dialog title="上传头像" :visible.sync="dialogFormVisibleAvatar">
      <el-upload
        class="upload-demo"
        drag
        accept="image/png, image/jpeg, image/jpg"
        :limit="1"
        :http-request="handleUploadForm"
        :auto-upload="false"
        ref="upload"
        action="https://chm.pengdong.top/user/publish-picture"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <el-button @click="uploadAvatar" type="primary" size="small"
        >上传</el-button
      >
    </el-dialog>

    <!-- 更新昵称对话框 -->
    <el-dialog title="更改昵称" :visible.sync="dialogFormVisibleNickname">
      <el-form ref="userForm1" :model="userForm1" :rules="rules">
        <el-form-item prop="nickname">
          <el-input
            placeholder="新昵称"
            v-model="userForm1.nickname"
          ></el-input>
        </el-form-item>

        <el-form-item size="small" class="me-login-button">
          <el-button
            @click="uploadNickname('userForm1')"
            type="primary"
            size="small"
            >上传</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 更改密码对话框 -->
    <el-dialog title="更改密码" :visible.sync="dialogFormVisiblePassword">
      <el-form
        :model="userForm2"
        status-icon
        :rules="rules1"
        ref="userForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码">
          <el-input
            type="password"
            v-model="userForm2.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="userForm2.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newInsurePassword">
          <el-input type="password" v-model="userForm2.newInsurePassword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="uploadPassword('userForm2')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { publishPicture, getUserInfo } from "@/api/article";
import { changeNickname, changePassword, changeAvatar } from "@/api/login";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.userForm2.newInsurePassword !== "") {
          this.$refs.userForm2.validateField("newInsurePassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userForm2.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      avatar: "",
      userForm1: {
        nickname: "",
      },
      userForm2: {
        password: "",
        newPassword: "",
        newInsurePassword: "",
      },
      userInfo: {},
      account: "",
      dialogFormVisibleAvatar: false,
      formData: {},
      dialogFormVisibleNickname: false,
      dialogFormVisiblePassword: false,
      rules: {
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { max: 10, message: "不能大于10个字符", trigger: "blur" },
        ],
      },
      rules1: {
        newPassword: [
          { validator: validatePass, trigger: "blur" },
          { max: 10, message: "不能大于10个字符", trigger: "blur" },
        ],
        newInsurePassword: [
          { validator: validatePass2, trigger: "blur" },
          { max: 10, message: "不能大于10个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getInfo() {
      this.avatar =
        "http://chm.pengdong.top/index/get/" + localStorage.getItem("avatar");
      this.userForm1.nickname = localStorage.getItem("nickname");
      this.account = localStorage.getItem("account");
      this.userForm2.password = localStorage.getItem("password");
      getUserInfo(this.account).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.userInfo = res.data.data;
        } else {
          console.log("no");
        }
      });
    },
    handleUploadForm(param) {
      this.formData = new FormData();
      // 在formData中加入我们需要的参数
      this.formData.append("file", param.file);
      // 向后端发送数据
      publishPicture(this.formData).then((res) => {
        localStorage.setItem("avatar", res.data.data);
        changeAvatar(localStorage.getItem("avatar")).then((res) => {
          var vo = res.data;
          if (vo.code == 10000) {
            this.dialogFormVisibleAvatar = false;
            location.reload();
          } else {
            console.log("no");
          }
        });
      });
    },
    uploadAvatar() {
      this.$refs.upload.submit();
    },
    uploadNickname(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          changeNickname(this.userForm1.nickname).then((res) => {
            var vo = res.data;
            if (vo.code == 10000) {
              that.$message({
                message: "修改成功！",
                type: "success",
                showClose: true,
              });
              localStorage.setItem("nickname", res.data.data.nickname);
              this.dialogFormVisibleNickname = false;
              this.getInfo();
            } else {
              that.$message({message: vo.msg, type: 'warn', showClose: true});
            }
          });
        } else {
          return false;
        }
      });
    },
    uploadPassword(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          changePassword(
            this.userForm2.password,
            this.userForm2.newPassword
          ).then((res) => {
            var vo = res.data;
            if (vo.code == 10000) {
              that.$message({
                message: "修改成功！",
                type: "success",
                showClose: true,
              });
              localStorage.setItem("password", res.data.data.password);
              this.dialogFormVisiblePassword = false;
              this.getInfo();
            } else {
              that.$message({message: vo.msg, type: 'warn', showClose: true});
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style>
.me-picture {
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: white;
}

.user-profile-head-info-l {
  margin-top: 40px;
  display: flex;
  -webkit-box-flex: 1;
  flex: 1;
  background: #fff;
}
.user-profile-head-info-ll {
  position: relative;
  width: 102px;
  height: 90px;
}
.user-profile-avatar {
  position: absolute;
  top: -24px;
  width: 102px;
  height: 102px;
  border: 4px solid #f0f0f2;
  border-radius: 50%;
  background: #fff;
}
.user-profile-head-info-rr {
  -webkit-box-flex: 1;
  flex: 1;
  margin-left: 16px;
}

.user-profile-head-info-r-t {
  margin-top: 16px;
}

.user-profile-head-info-r-c {
  margin-top: 10px;
}

.user-profile-head-name {
  color: #222226;
  font-size: 22px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  word-break: break-all;
  -webkit-box-align: start;
  align-items: flex-start;
}

.person-code-age {
  height: 16px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  border-radius: 8px;
  margin-left: 4px;
  margin-top: 4px;
  -webkit-box-flex: inherit;
  flex: inherit;
}

.user-profile-statistics-num {
  color: #222226;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  margin-right: 4px;
}

.user-profile-statistics-name {
  color: #555666;
  font-size: 14px;
  line-height: 16px;
  margin-top: 2px;
}

.user-profile-statistics-bar {
  width: 1px;
  height: 16px;
  background: #e8e8ed;
  margin: 0 16px;
}
</style>